import * as React from 'react';
import { Image, ImageProps, StyleSheet, View } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

interface UserAvatarProps extends ImageProps {
  hasStar?: boolean;
  size?: 'small' | 'medium' | 'large';
}

export default function UserAvatar(props: UserAvatarProps) {
  const { hasStar = false, size = 'medium', style, ...imageProps } = props;
  return (
    <View style={[styles.container, styles[size], style]}>
      <Image style={styles.image} {...imageProps} />
      {hasStar && (
        <FontAwesome
          style={styles.star}
          name="star"
          size={14}
          color="#eda139"
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 32,
    width: 32,
    borderRadius: 20,
  },
  small: {
    height: 28,
    width: 28,
    borderRadius: 16,
  },
  medium: {
    height: 32,
    width: 32,
    borderRadius: 20,
  },
  large: {
    height: 48,
    width: 48,
    borderRadius: 24,
  },
  image: {
    height: '100%',
    width: '100%',
    borderRadius: 48,
  },
  star: {
    position: 'absolute',
    right: -3,
    bottom: -3,
  },
});
